<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BilibiliBlock</title>
  <style>
    /* 重置样式 */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      width: 320px;
      padding: 16px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #333;
      line-height: 1.5;
      background-color: #f9f9f9;
    }
    
    /* 标题 */
    .header {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }
    
    .header-logo {
      width: 24px;
      height: 24px;
      margin-right: 8px;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      color: #fb7299;
    }
    
    /* 分割线 */
    .divider {
      height: 1px;
      margin: 12px 0;
      background-color: #eee;
    }
    
    /* 操作区域 */
    .actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 16px;
    }
    
    .action-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      border-radius: 8px;
      background-color: #fff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
      color: #333;
    }
    
    .action-button:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }
    
    .action-icon {
      font-size: 20px;
      margin-bottom: 6px;
      color: #fb7299;
    }
    
    .action-label {
      font-size: 13px;
    }
    
    /* 黑名单列表 */
    .blocklist-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .blocklist-title h2 {
      font-size: 16px;
      font-weight: 600;
    }
    
    .blocklist-count {
      font-size: 12px;
      color: #999;
    }
    
    .blocklist {
      max-height: 300px;
      overflow-y: auto;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }
    
    .blocklist-empty {
      padding: 20px;
      text-align: center;
      color: #999;
    }
    
    .blocklist-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      border-bottom: 1px solid #f5f5f5;
    }
    
    .blocklist-item:last-child {
      border-bottom: none;
    }
    
    .user-info {
      display: flex;
      align-items: center;
    }
    
    .user-name {
      font-weight: 500;
      margin-right: 5px;
    }
    
    .user-uid {
      font-size: 12px;
      color: #999;
    }
    
    /* 暗色模式 */
    @media (prefers-color-scheme: dark) {
      body {
        background-color: #222;
        color: #eee;
      }
      
      .action-button {
        background-color: #333;
        color: #eee;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      }
      
      .blocklist {
        background-color: #333;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      }
      
      .blocklist-item {
        border-bottom: 1px solid #444;
      }
      
      .divider {
        background-color: #444;
      }
    }
  </style>
</head>
<body>
  <!-- 头部 -->
  <div class="header">
    <img src="../src/images/icon48.png" alt="BilibiliBlock" class="header-logo">
    <h1 class="header-title">BilibiliBlock</h1>
  </div>
  
  <!-- 功能按钮 -->
  <div class="actions">
    <a href="options.html" target="_blank" class="action-button">
      <span class="action-icon">⚙️</span>
      <span class="action-label">选项设置</span>
    </a>
    <a href="https://github.com/yanstu/BilibiliBlock" target="_blank" class="action-button">
      <span class="action-icon">📦</span>
      <span class="action-label">查看源码</span>
    </a>
  </div>
  
  <div class="divider"></div>
  
  <!-- 黑名单列表 -->
  <div class="blocklist-title">
    <h2>黑名单列表</h2>
    <span class="blocklist-count" id="blocklist-count">加载中...</span>
  </div>
  
  <div class="blocklist" id="blocklist">
    <div class="blocklist-empty">正在加载黑名单...</div>
  </div>
  
  <script src="../src/js/popup.js"></script>
</body>
</html> 